<template>
  <div @mousedown="handleMouseDown($event)" @mouseup="handleMouseUp($event)" class="img-content">
    <img class="icon-img" @click="handleClick" @error="handleError" :src="src">
    <div v-transfer-dom>
      <div v-if="showDialogStyle" class="dialog">
        <div class="dialogBack" @click="showDialogStyle = false"></div>
        <div class="dialogImg">
          <img ref="imgV" class="bigImg"
               style="transform: scale(1.0) rotate(0deg); margin-left: 0px; margin-top: 0px; max-height: 100%; max-width: 100%; transition: transform 0.3s ease 0s;"
               :src="src">
        </div>
        <div class="tool">
          <x-icon @click="img.scale = (img.scale - 0.2) < 0.3 ? 0.3 : img.scale - 0.2 " class="canClick"
                  type="ios-minus-outline" size="40"></x-icon>
          <x-icon @click="img.range = Number(img.range) + 90" class="canClick" type="ios-ionic-outline" size="40"></x-icon>
          <x-icon @click="img.scale = (img.scale + 0.2) > 1.8 ? 1.8 : img.scale + 0.2 " class="canClick"
                  type="ios-plus-outline" size="40"></x-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import base64 from '../base64'
  import {XDialog} from 'vux'

  export default {
    name: "zimg",
    props: ['src'],
    watch: {
      img: {
        handler: function () {
          this.handleChangeImgSizeView();
        },
        deep: true
      }
    },
    data() {
      return {
        showDialogStyle: false,
        state: true,
        img: {
          scale: 1,
          range: 0
        }
      };
    },
    methods: {
      handleClick() {
        if (!this.state) {
          return;
        }
        this.showDialogStyle = true;
      },
      handleError(item) {
        debugger
        item.target.src = base64.errorBase64
      },
      handleMouseDown(event) {
        let classList = event.target.classList;
        let tokens = 'clickDown';
        if (classList.contains(tokens)) {
          classList.remove(tokens)
        }
      },
      handleMouseUp(event) {
        event.target.classList.add('clickDown');
      },
      handleChangeImgSizeView() {
        this.$refs.imgV.style = `transform: scale(${this.img.scale}) rotate(${this.img.range}deg); margin-left: 0px; margin-top: 0px; max-height: 100%; max-width: 100%; transition: transform 0.3s ease 0s;`
      }
    },
    components: {
      XDialog
    }
  }
</script>

<style scoped>
  .icon-img {
    width: 100%;
    height: 100%;
    max-height: 98rem;
  }

  .img-content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    transition-property: box-shadow;
    transition-duration: 1s;
    transition-delay: 0s;
    transition-timing-function: linear;
  }

  .clickDown {
    animation: circle 0.3s ease-out 75ms;
  }

  @keyframes circle {
    0% {
      box-shadow: 0 0 0 1px rgba(219, 28, 28, 0.3);
    }
    40% {
      box-shadow: 0 0 0 1px rgba(219, 28, 28, 0.3);
    }
    100% {
      box-shadow: 0 0 0 1px rgba(182, 56, 56, 0.3);
    }
  }

  .dialog {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 501;

  }

  .dialog .dialogBack {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: .5;
    background: #000;
  }

  .dialogImg {
    display: flex;
    width: 100%;
    height: 100%;
    align-content: center;
    align-items: center;
  }

  .bigImg {
    opacity: .9;
    max-height: 100%;
    max-width: 100%;
  }

  .tool {
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    width: 282px;
    height: 44px;
    padding: 0 23px;
    background-color: #606266;
    border-color: #fff;
    border-radius: 22px;

    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .8;
    box-sizing: border-box;

  }

  .tool div {
    width: 2rem;
    height: 2rem;
    position: relative;
    z-index: 502;
    color: #131212;
    font-size: 1rem;
  }

  .canClick {
    cursor: pointer;
    color: #fbf9fe;
  }

  .vux-x-icon {
    fill: #ece5e8;
  }

</style>
